
<script lang="ts" setup >

import { reactive, ref } from "vue";
import { ElMessageBox } from "element-plus";
import type { ElTree } from "element-plus";
import type { TreeKey } from "element-plus/es/components/tree/src/tree.type";
import type {IAdminData} from "@/mytype"
import {addAdminApi} from "@/api/admin";

const drawer = ref(false);
const direction = ref('rtl');

// 声明事件（关闭事件）
let emit = defineEmits(["closeDrawer"]);

// 关闭添加页面

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('你要关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

// 
const data = reactive<IAdminData>({
    adminname: "",
    password: "",
    role: "",
    checkedKeys: []
})

// 权限处理:
interface Tree {
    menuid: string,
    label: string,
    children?: Array<Tree>
}

const treeRef = ref<InstanceType<typeof ElTree>>()

const grantData: Tree[] = [
    {
        menuid: "0-0",
        label: '系统首页'
    },
    {
        menuid: "0-1",
        label: '轮播图管理',
        children: [
            {
                menuid: "0-1-0",
                label: "轮播图列表"
            },
            {
                menuid: "0-1-1",
                label: "添加轮播图"
            }
        ]
    },
    {
        menuid: "0-2",
        label: '产品管理',
        children: [
            {
                menuid: "0-2-0",
                label: "产品列表"
            },
            {
                menuid: "0-2-1",
                label: "秒杀列表"
            },
            {
                menuid: "0-2-2",
                label: "推荐列表"
            }
        ]
    }
]

function getCheckedKeys() {
    // console.log("获取选中的节点:", treeRef.value!.getCheckedKeys(false));
    data.checkedKeys = treeRef.value!.getCheckedKeys(false);
}

// 添加管理员
function addAdmin() {
    console.log("data", data);
    // 给后端发送请求???
    addAdminApi(data)
    .then((res:any)=>{
        if(res.code==="200"){
            ElMessageBox({
                title:"提示",
                message:"添加成功！"
            });
            emit("closeDrawer");
        }
    })

}

</script>

<template>
    <el-drawer  title="添加管理员" :direction="direction" :before-close="handleClose">
        <el-form style="max-width: 460px" :model="data">
            <div style="margin: 20px" />
            <el-form-item>
                <el-input class="w-50 m-2" placeholder="请输入账户名" v-model="data.adminname" />
            </el-form-item>

            <el-form-item>
                <el-input class="w-50 m-2" placeholder="请输入密码" type="password" v-model="data.password" />
            </el-form-item>

            <el-select v-model="data.role" class="m-2" placeholder="Select" size="large">
                <el-option  label="管理员" value="1" />
                <el-option  label="超级管理员" value="2" />
            </el-select>

            <!-- 树形结构 -->
            <el-tree ref="treeRef" :data="grantData" show-checkbox default-expand-all node-key="menuid"
                highlight-current @check="getCheckedKeys" />

            <el-form-item>
                <el-button type="primary" @click="addAdmin">添加管理员</el-button>
                <el-button type="primary">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

</template>

<style scoped>

</style>

<!-- 权限：
添加管理员：


管理员的权限：

系统首页：0-0
轮播图管理：0-1
  轮播图列表：0-1-0
  添加轮播图：0-1-1

产品管理： 0-2
   产品列表：0-2-0
   秒杀列表：0-2-1
   推荐列表：0-2-2


   adminname: "yangboxing"
checkedKeys: ["0-0", "0-1", "0-1-0", "0-1-1", "0-2", "0-2-0", "0-2-1", "0-2-2", "0-2-3"]
0: "0-0"
1: "0-1"
2: "0-1-0"
3: "0-1-1"
4: "0-2"
5: "0-2-0"
6: "0-2-1"
7: "0-2-2"
8: "0-2-3"
password: "123"
role: 1

-->